<script lang="ts" setup>
import { PieChart } from "@element-plus/icons-vue"
import * as echarts from "echarts"
import { getWorkBenchAPI } from "@/pages/dashboard/api"
import { useUserStore } from "@/pinia/stores/user"

type EChartsOption = echarts.EChartsOption

const info = ref<any>({})
const echartsContainer = ref<HTMLDivElement>()
let chartInst: echarts.ECharts | null = null
const userStore = useUserStore()

async function getInfo() {
  const res = await getWorkBenchAPI()
  info.value = res.data
}

onMounted(async () => {
  await getInfo()
  if (!echartsContainer.value) return

  chartInst = echarts.init(echartsContainer.value)

  const option: EChartsOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {},
    xAxis: {
      type: "category",
      data: info.value.annualIncomeArray?.xmonth || []
    },
    yAxis: { type: "value" },
    series: [
      { name: "楼房收入", type: "bar", data: info.value.annualIncomeArray?.ybuilding || [], stack: "a" },
      { name: "车位收入", type: "bar", data: info.value.annualIncomeArray?.yparking || [], stack: "a" }
    ]
  }
  chartInst.setOption(option)

  /* ↓↓↓ 关键：容器大小变化时自动 resize ↓↓↓ */
  const ro = new ResizeObserver(() => chartInst?.resize())
  ro.observe(echartsContainer.value)

  onUnmounted(() => {
    ro.disconnect()
    chartInst?.dispose()
  })
})

const isAdmin = userStore.roles.includes("超级管理员")
</script>

<template>
  <el-row style="margin:20px;">
    <el-col :span="15">
      <el-row>
        <el-card style="margin-bottom:20px;height:300px;width:100%">
          <template #header>
            <div class="card-header">
              <span>园区数据</span>
            </div>
          </template>
          <div class="incomeInfo">
            <div>
              <p>年度累计收费</p>
              <p>{{ info?.annualIncome }}</p>
            </div>
            <div>
              <p>入驻企业总数</p>
              <p>{{ info?.enterpriseTotal }}</p>
            </div>
            <div>
              <p>月卡车辆数</p>
              <p>{{ info?.monthCardTotal }}</p>
            </div>
            <div>
              <p>一体杆总数</p>
              <p>{{ info?.chargePoleTotal }}</p>
            </div>
          </div>
        </el-card>
      </el-row>
      <el-row>
        <el-card style="height:600px;width:100%">
          <template #header>
            <div class="card-header">
              <span>年度收入统计</span>
            </div>
          </template>
          <div ref="echartsContainer" style="width:100%;height:530px;" />
        </el-card>
      </el-row>
    </el-col>
    <el-col :span="8" :offset="1">
      <el-card>
        <template #header>
          <div class="card-header">
            <h2 style="margin:0px;">
              快捷入口
            </h2>
          </div>
        </template>
        <div style="height:200px;">
          <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;cursor:pointer;margin-top:20px;" v-if="isAdmin" @click="$router.push('/visualization')">
            <el-icon :size="30">
              <PieChart />
            </el-icon>
            <p>可视化大屏</p>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.incomeInfo {
  display: flex;
  justify-content: space-around;
}
</style>
